<template>
  <view>
    <view class="sweep_code-ul">
      <block v-for="(item, index) in out_detail.details" :key="index">
        <view class="sweep_code-li clearfix" v-if="item.num > 0">
          <view class="clearfix logs-goods">
            <view class="float_left goods-img">
              <image :src="item.images[0]" mode="aspectFill"></image>
              <view class="all-tag" v-if="Number(item.notOutNum) === 0"
                >全部出库</view
              >
            </view>
            <view class="float_left goods-info">
              <view class="goods-name ellipsis">{{ item.materielName }}</view>
              <view class="goods-sku"
                >{{ item.unitName }};{{ item.skuName }}</view
              >
              <view class="stock-region clearfix">
                <text class="label">仓库：</text>
                {{ item.warehouseName }}
              </view>
              <view
                class="stock-region clearfix"
                v-if="item.storageLocationName"
              >
                <text class="label">库区库位：</text>
                {{ item.areaName }}-{{ item.storageLocationName }}
              </view>
            </view>
          </view>
          <view class="bottom clearfix">
            <view class="float_left">
              <text>待出库：</text>
              <text class="num">{{ $utils.formatNub(item.total) }}</text>
              <block v-if="Number(item.total) !== Number(item.num)">
                <text style="margin-left: 10rpx">未出库：</text>
                <text class="num" style="color: #fa6400">{{
                  Number(item.notOutNum)
                }}</text>
              </block>
            </view>
            <view class="float_right">
              <text style="margin-right: 24rpx">实出</text>
              <u-number-box
                :index="index"
                :min="0"
                :max="Number(item.maxOutNum)"
                :value="item.num"
                @change="numChange"
              ></u-number-box>
            </view>
          </view>
        </view>
      </block>
    </view>
    <view class="inform" @click="lookpop">
      未出库商品清单：商品{{ notMaterielNum }} 数量{{ notGoodsTotal }}
      <view class="float_right"
        ><u-icon name="arrow-right" size="30" color="#FA6400"></u-icon
      ></view>
    </view>
    <view class="submit-btn clearfix">
      <view class="submit-btn-left float_left"
        >本次出库：商品{{ outMaterielNum }} 数量{{ outGoodsTotal }}</view
      >
      <view
        class="btn-right float_right"
        :class="[outMaterielNum < 1 ? 'btn-min-no' : '']"
        @click="tipshow = true"
        >确认</view
      >
    </view>
    <u-modal
      v-model="tipshow"
      @cancel="modalCancel"
      @confirm="modalConfirm"
      :show-cancel-button="true"
      :content="`本次出库：商品${outMaterielNum} 数量${outGoodsTotal}`"
    ></u-modal>
    <u-popup v-model="no_out_show" mode="bottom">
      <view class="poptitle"
        >未出库商品清单：商品{{ notMaterielNum }} 数量{{ notGoodsTotal }}</view
      >
      <view class="sweep_code-ul" style="padding-bottom: 20rpx">
        <block v-for="(item, index) in notOutMateriels" :key="index">
          <view class="sweep_code-li clearfix" style="padding-top: 0">
            <view class="clearfix logs-goods">
              <view class="float_left goods-img"
                ><image :src="item.images[0]" mode="aspectFill"></image
              ></view>
              <view class="float_left goods-info">
                <view class="goods-name ellipsis">{{ item.materielName }}</view>
                <view class="goods-sku"
                  >{{ item.unitName }};{{ item.skuName }}</view
                >
                <view class="goods-sku">
                  待出库：
                  <text class="num">{{ item.notOutNum }}</text>
                </view>
              </view>
            </view>
          </view>
        </block>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      no_out_show: false,
      tipshow: false,
      out_detail: {
        details: [],
      },
      goods_list: [],
      no_goods_list: [],
    };
  },
  watch: {},
  computed: {
    userInfo() {
      return this.$store.state.userInfo;
    },
    // 出库商品种类
    outMaterielNum() {
      const list = this.out_detail.details
        .filter((item) => item.num > 0)
        .map((item) => item.skuId);
      return [...new Set(list)].length;
    },
    // 出库合计数量
    outGoodsTotal() {
      let num = 0;
      this.out_detail.details.forEach((item) => {
        num = this.$NP.plus(Number(item.num), num);
      });
      return num;
    },
    // 未出库 合计数量
    notGoodsTotal() {
      let num = 0;
      this.out_detail.details.forEach((item) => {
        if (item.notOutNum > 0) {
          num = this.$NP.plus(item.notOutNum, num);
        }
      });
      return num;
    },
    // 未出库 合计数量
    notMaterielNum() {
      const list = this.out_detail.details
        .filter((item) => item.notOutNum > 0)
        .map((item) => item.skuId);
      return [...new Set(list)].length;
    },
    notOutMateriels() {
      const list = this.out_detail.details.filter((item) => item.notOutNum > 0);
      return this.$utils.unique(list, ["materielId", "skuId"]);
    },
  },
  onLoad() {},
  onShow() {
    this.isFirst = true;
    this.out_detail = uni.getStorageSync("outDetail");
    setTimeout(() => {
      this.isFirst = false;
    }, 2000);
  },
  methods: {
    // 因为步进器组件 v-model 动态渲染失效，所以使用 v-bind:value
    // 但是 v-bind:value 首次会触发 change 事件
    // 所以加了个首次渲染标示 isFirst
    numChange({ value, index }) {
      if (this.isFirst) {
        return;
      }
      const detailObj = this.$u.deepClone(this.out_detail);
      const target = detailObj.details;
      target[index].num = value;
      // 统计当前已经出库的数量
      let outnum = 0;
      let otherOutnum = 0;
      target.forEach((item) => {
        if (item.skuId === target[index].skuId) {
          outnum += item.num;
          if (item.warehouseId !== target[index].warehouseId) {
            otherOutnum += item.num;
          }
        }
      });
      // 设置最大值
      if (
        Number(target[index].locationNum) &&
        Number(target[index].locationNum) > Number(target[index].total)
      ) {
        target[index].maxOutNum = this.$NP.minus(
          target[index].total,
          otherOutnum
        );
      } else {
        target[index].maxOutNum = this.$NP.minus(
          target[index].locationNum || target[index].total,
          otherOutnum
        );
      }
      // 设置未出库数量
      target.forEach((item) => {
        if (item.skuId === target[index].skuId) {
          item.notOutNum =
            this.$NP.minus(item.total, outnum) <= 0
              ? 0
              : this.$NP.minus(item.total, outnum);
        }
      });
      detailObj.details = target;
      this.out_detail = detailObj;
      // this.$set(this.out_detail.details[index], 'num', value);
    },
    lookpop() {
      this.no_out_show = true;
    },
    modalCancel() {
      this.tipshow = false;
    },
    modalConfirm() {
      // 未出库商品
      const UnassignedSkuData = this.out_detail.details.filter(
        (item) => item.num < item.total
      );
      // 出库商品
      const outData = this.out_detail.details.filter((item) => item.num > 0);
      let outobj = {};
      outData.forEach((item) => {
        if (outobj[item.warehouseId]) {
          outobj[item.warehouseId].details.push(item);
        } else {
          outobj[item.warehouseId] = {
            details: [item],
            warehouseId: item.warehouseId,
            warehouseName: item.warehouseName,
          };
        }
      });
      const outWarehouseData = Object.values(outobj);
      this.$u.api
        .updateSaleOutStatus({
          id: this.out_detail.id,
          auditName: this.userInfo.name || "",
          UnassignedSkuData: UnassignedSkuData,
          outWarehouseData: outWarehouseData,
        })
        .then((res) => {
          this.$u.toast("出库成功!");
          this.modalCancel();
          this.goPage("/pagesT/stock/SalesOrder", "redirectTo");
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.sweep_code-ul {
  padding-bottom: 200rpx;
  .sweep_code-li {
    margin-top: 20rpx;
    width: 100%;
    background-color: #ffffff;
    padding-top: 24rpx;

    .logs-goods {
      position: relative;
    }

    .goods-img {
      position: relative;
      width: 150rpx;
      height: 150rpx;
      margin-right: 20rpx;
      margin-left: 24rpx;
      border-radius: 10rpx;
      overflow: hidden;
      .all-tag {
        line-height: 36rpx;
        height: 36rpx;
        background-color: #2dc584;
        text-align: center;
        width: 100%;
        color: #ffffff;
        font-size: 22rpx;
        position: absolute;
        left: 0;
        bottom: 0;
      }
      image {
        width: 100%;
        height: 100%;
        display: block;
      }
    }

    .goods-info {
      width: 520rpx;
      .goods-name {
        height: 40rpx;
        line-height: 40rpx;
      }
      .goods-sku {
        padding-top: 10rpx;
        color: #879bba;
        font-size: 24rpx;
      }
      .stock-region {
        padding-top: 10rpx;
        color: #879bba;
        font-size: 24rpx;
        line-height: 40rpx;
        border-bottom: 1px solid $uni-color-primary;
        .label {
          display: inline-block;
          vertical-align: middle;
          width: 120rpx;
          margin-right: 10rpx;
        }
      }
    }
  }

  .bottom {
    margin-top: 20rpx;
    border-top: 1px solid #eeeeee;
    height: 80rpx;
    line-height: 80rpx;
    padding: 0 24rpx;

    .float_left {
      color: #879bba;
      width: 320rpx;
      font-size: 22rpx;
      .num {
        font-size: 26rpx;
        color: #2d405e;
      }
    }

    .float_right {
      font-size: 26rpx;
    }
  }
}
.submit_cont {
  position: absolute;
  top: 40%;
  left: 50%;
  font-size: 30rpx;
  transform: translate(-50%, -50%);
}
.submit-btn {
  padding: 0;
  .submit-btn-left {
    padding-left: 24rpx;
    font-size: 24rpx;
    color: #879bba;
    line-height: 98rpx;
  }

  .btn-right {
    text-align: center;
    width: 300rpx;
    color: #ffffff;
    background-color: $uni-color-primary;
    line-height: 98rpx;
    border-radius: 0;
    &.btn-min-no {
      background-color: #879bba;
    }
  }
}
.inform {
  z-index: 9;
  padding: 0 24rpx;
  position: fixed;
  left: 0;
  bottom: 98rpx;
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 24rpx;
  color: #fa6400;
  background: #fdecee;
}
.poptitle {
  padding: 0 24rpx;
  height: 80rpx;
  line-height: 80rpx;
}
.submit {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 80rpx;
  font-size: 30rpx;
  text-align: center;
  line-height: 80rpx;
  border-top: 2rpx solid rgb(241, 243, 247);
  .submit_left {
    width: 50%;
  }
  .submit_right {
    width: 50%;
  }
}
</style>
